<template>
  <PageWrapper :sidebarWidth="230" ref="contentElRef">
    <template #sidebar>
      <MyTreeSelect v-bind="treeProps" @select="onTreeSelect" ref="dataGroupRef" @add-child="handleAddGroup" @edit="handleEditGroup" />
    </template>

    <a-tabs defaultActiveKey="image" @change="handleChange">
      <a-tab-pane v-for="item in MaterialType" :tab="item.name" :key="item.type" force-render />
    </a-tabs>

    <div style="" class="'h-full'">
      <MaterialList :groupId="groupId" :materialType="activeMaterialType" @open-group="handleOpenGroup" />
    </div>
    <MeterialGroupModal @register="registerModal" @success="handleGroupForm" />
  </PageWrapper>
</template>

<script lang="ts" setup name="system-depart-user">
  import { PageWrapper } from "/@/components/Page"
  import { provide, ref, onUnmounted } from "vue"
  import { useDesign } from "/@/hooks/web/useDesign"
  import { useModal } from "/@/components/Modal"
  import { MyTreeSelect, MyTreeProps } from "/@/components/BizTreeSelect"
  import { listDataGroupTree } from "/@/api/infra/dataGroup"

  import MaterialList from "/@/components/BizMaterial/src/components/MaterialList.vue"
  import MeterialGroupModal from "/@/components/BizMaterial/src/components/MeterialGroupModal.vue"
  import { MaterialType } from "/@/components/BizMaterial/src/material.data"
  import { deleteGroup } from "/@/api/infra/material"
  import { DataGroupBizType } from "/@/components/BizDataGroup/index"

  const activeMaterialType = ref(MaterialType.IMAGE.type)
  const contentElRef = ref()
  const dataGroupRef = ref<any>()
  const materialListRef = ref<any>()
  const [registerModal, { openModal }] = useModal()
  const { prefixCls } = useDesign("material")

  const treeProps = ref<MyTreeProps>({
    api: listDataGroupTree,
    searchField: "name",
    enableAddChird: true,
    enableDelete: true,
    enableEdit: true,
    deleteApi: deleteGroup,
    params: {
      groupType: activeMaterialType.value,
      bizType: DataGroupBizType.MATERIAL,
    },
  })
  let timer: any = null
  provide("prefixCls", prefixCls)

  // 当前选中的分组
  let groupId = ref()

  // 左侧树选择后触发
  function onTreeSelect(data) {
    console.log("onTreeSelect", data)
    groupId.value = data
  }

  const handleOpenGroup = (materialType) => {
    openModal(true, {
      isUpdate: false,
      materialType,
    })
  }

  const handleGroupForm = () => {
    dataGroupRef.value.reload()
  }

  const handleChange = async (e) => {
    console.log("tab: ", e)
    clearTimeout(timer)
    timer = null
    // 避免切换tab卡顿
    timer = setTimeout(() => {
      activeMaterialType.value = e
      treeProps.value.params.groupType = e
    }, 200)
  }

  const handleAddGroup = (node) => {
    openModal(true, {
      isUpdate: false,
      materialType: activeMaterialType.value,
      record: { parentId: node.id },
    })
  }

  const handleEditGroup = (node) => {
    openModal(true, {
      isUpdate: true,
      materialType: activeMaterialType.value,
      record: {
        ...node,
        name: node.title,
      },
    })
  }

  onUnmounted(() => {
    clearTimeout(timer)
    timer = null
  })
</script>

<style lang="less">
  @import "/@/components/BizMaterial/src/index.less";
</style>
